/**
 * Created by duzi on 7/7/15.
 */
$(document).ready(function(){
    var yearChart = {
        $chart: $('.yearchart'),
        init:function(){
            var self = this;
            $.ajax({
                type: "GET",
                url: "/bills/year",
                contentType: 'application/json',
                success: function(response){
                    self.config(JSON.parse(response));
                }
            })
        },
        config: function(data){
            console.log(data);
            this.$chart.highcharts({
                title: {
                    text: '全年訂單chart',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: pos雞',
                    x: -20
                },
                xAxis: {
                    categories: ['01', '02', '03', '04', '05', '06',
                        '07', '08', '09', '10', '11', '12']
                },
                yAxis: {
                    title: {
                        text: '銷售金額 (yuan)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: 'yuan'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: 'all',
                    data: data
                }]
            });
        }
    };

    var categoryChart = {
        $chart: $('.categorychart'),
        $table: $('#datatable'),
        $start: $("#chartStart"),
        $end: $("#chartEnd"),
        $subimt: $("#chartSubmit"),
        init: function(start, end){
            var self = this;
            start = start ||  "2015-01-01";
            end = end || "2015-07-11";

            $.ajax({
                type: "POST",
                url: "/category/bills",
                data: JSON.stringify({start:start, end: end}),
                contentType: 'application/json',
                success: function(response){
                    var html = "";
                    Object.keys(response).forEach(function(key){
                        html += '<tr><td>' + key + '</td><td>' + response[key] + '</td>';
                    });
                    self.$table.find("tbody").html(html);
                    self.config();
                }
            })

        },
        config: function(){
            // Create the chart
            this.$chart.highcharts({
                data: {
                    table: 'datatable'
                },
                chart: {
                    type: 'column'
                },
                title: {
                    text: '分類銷售報表'
                },
                yAxis: {
                    allowDecimals: false,
                    title: {
                        text: '銷售額'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ' + this.point.name.toLowerCase();
                    }
                }
            });
        },
        event: function(){
            var self = this;
            this.$subimt.on('click', function(){
                if(!self.$start.val() && !self.$end.val()){
                    alert('need to config time');
                    return
                }
                self.init(self.$start.val() ,self.$end.val() );
            })
        }
    }
    yearChart.init();

    categoryChart.init();
    categoryChart.event();
})